<script src="../../../api/dashboard/chartData.js"></script>
<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <div class="charDateCard">
          <a-row :gutter="24">
            <div class="tj-title">
              <div v-action:other class="search">
                <h2 style="float: left">基础数据</h2>
                <a-select
                  style="float: left;margin: 15px 20px;"
                  :defaultValue="defaultCompany"
                  v-model="queryParam.companyid"
                  placeholder="请选择所属公司">
                  <a-select-option :value="company.id" v-for="company in companyList" :key="company.id">
                    {{company.name}}
                  </a-select-option>
                </a-select>
                <a-date-picker style="float: left;margin: 15px 2px;"
                  format="YYYY-MM-DD"
                  v-model="queryParam.beginTime"
                  placeholder="开始"
                />
                <a-date-picker style="float: left;margin: 15px 2px;"
                  format="YYYY-MM-DD"
                  placeholder="结束"
                  v-model="queryParam.endTime"
                />
                <a-button type="primary" @click="queryDetailData" style="float: left;margin: 15px 2px;">查询</a-button>
              </div>
            </div>
          </a-row>

          <a-row :gutter="24" style="padding: 10px 20px;">

            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickFeeSum">
                <div class="item-title">总销售额</div>
                <div class="item-info">
                  <div class="info-icon money"></div>
                  <div class="info-number">{{chartData.feeSum}}元</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickFeeCount">
                <div class="item-title">支付笔数</div>
                <div class="item-info">
                  <div class="info-icon pay"></div>
                  <div class="info-number">{{chartData.feeCount}}笔</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickGetCounts">
                <div class="item-title">优惠券领取数量</div>
                <div class="item-info">
                  <div class="info-icon tick"></div>
                  <div class="info-number">{{chartData.getCounts}}张</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickConsumCounts">
                <div class="item-title">优惠券核销数量</div>
                <div class="item-info">
                  <div class="info-icon check"></div>
                  <div class="info-number">{{chartData.consumCounts}}张</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickConsumePersonCount">
                <div class="item-title">消费人数</div>
                <div class="item-info">
                  <div class="info-icon customer"></div>
                  <div class="info-number">{{chartData.consumePersonCount}}人</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickNewPersonCount">
                <div class="item-title">新顾客</div>
                <div class="item-info">
                  <div class="info-icon newCustomer"></div>
                  <div class="info-number">{{chartData.newPersonCount}}人</div>
                </div>
              </div>
            </a-col>
            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
              <div class="chart-item" v-on:click="clickOldPersonCount">
                <div class="item-title">老顾客</div>
                <div class="item-info">
                  <div class="info-icon oldCustomer"></div>
                  <div class="info-number">{{chartData.oldPersonCount}}人</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <lineChart ref="lineChart"  v-bind:companyid="companyid" v-if="true"></lineChart>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24">

      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <ageSexBar ref="ageSexBar"  v-bind:companyid="companyid" v-if="true"/>
        </a-card>
      </a-col>

    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">

          <areaMap ref="areaMap"  v-bind:companyid="companyid" v-if="true"/>

        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <deviceLine ref="map" v-bind:companyid="companyid" v-if="true"/>
        </a-card>
      </a-col>
    </a-row>


  </div>
</template>

<script>
  //ly
  import ageSexBar from '../../../components/chart/ageSexBar'
  import areaMap from '../../../components/chart/areaMap'
  import deviceLine from '../../../components/chart/deviceLine'
  import lineChart from '../../../components/chart/lineChart'
  import { selectAllCompany } from '../../../api/system/company'
  import { getChartData } from '../../../api/dashboard/chartData'
  import  moment  from 'moment'

  export default {
    name: 'Analysis',
    components: {
      //ly
      ageSexBar,
      areaMap,
      deviceLine,
      lineChart
    },
    data() {
      return {
        loading: true,
        defaultCompany: 1,
        companyList: [],
        chartData: {},
        companyid:'',
        paramData:{},
        queryParam:{},
        queryParam1:{},
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.getAllCompany()
    },
    methods: {
      getAllCompany: function() {
        selectAllCompany().then(res => {
          if (res.code === 200) {
            this.companyList = res.result
            this.defaultCompany = this.companyList[0].id
            this.companyid=this.companyList[0].id
            this.queryParam.companyid = this.defaultCompany;
            this.getData(this.queryParam)
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      },
      handleProvinceChange(value) {
        //根据id拉取详情
        this.getData(value)
        this.$refs.map.getAllMerchant('1', 'activeUsers',value);
        this.$refs.areaMap.getAllMerchant('1', 'activeUsers',value);
        this.$refs.ageSexBar.getAllMerchant('1', 'activeUsers',value);
        this.$refs.lineChart.getConsumeRankData(value);
      },
      // 数据详情
      getData: function(param) {
        this.queryParam = param
        const beginTimeQuery = this.queryParam.beginTime
        const endTimeQuery = this.queryParam.endTime
        if(beginTimeQuery!=undefined){
          console.log(moment(beginTimeQuery).format('YYYY-MM-DD'))
          this.queryParam1.beginTime = moment(beginTimeQuery).format('YYYY-MM-DD')
        }
        if(beginTimeQuery!=undefined){
          this.queryParam1.endTime = moment(endTimeQuery).format('YYYY-MM-DD')
        }
        this.queryParam1.companyId = this.queryParam.companyid;
        console.log("-----------初始化查询---------------");
        console.log(this.queryParam1);
        getChartData(this.queryParam1).then(res => {
          if (res.code === 200) {
            this.chartData = res.result
          } else {
            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      },
      clickFeeSum:function(record){
        console.log(this.companyid);
        this.$emit('onFeeSum',this.companyid)
      },
      clickFeeCount:function(record){
        // this.$emit('onFeeCount', record)
        this.$emit('onFeeSum', this.companyid)
      },
      clickGetCounts:function(record) {
        this.paramData.companyid=this.companyid;
        this.$emit('onGetCounts', this.paramData)
      },
      clickConsumCounts:function(record) {
        this.paramData.companyid=this.companyid;
        /*只查看已核销的优惠卷*/
        this.paramData.state=1;
        this.$emit('onGetCounts', this.paramData)
        // this.$emit('onConsumCounts', this.companyid)
      },
      clickConsumePersonCount:function(record) {
        this.paramData.companyid=this.companyid;
        /*查看消费人数*/
        this.$emit('onConsumePersonCount', this.paramData)
      },
      clickNewPersonCount:function(record) {
        this.paramData.companyid=this.companyid;
        /*只查看新顾客*/
        this.paramData.status=0;
        this.$emit('onNewPersonCount', this.paramData)
      },
      clickOldPersonCount:function(record) {
        this.paramData.companyid=this.companyid;
        /*只查看老顾客*/
        this.paramData.status=1;
        this.$emit('onOldPersonCount', this.paramData)
      },
      queryDetailData:function(){
        console.log(this.queryParam);
        //根据id拉取详情
        let companyid= this.queryParam.companyid
        this.getData(this.queryParam)
        this.$refs.map.getAllMerchant('1', 'activeUsers',companyid);
        this.$refs.areaMap.getAllMerchant('1', 'activeUsers',companyid);
        this.$refs.ageSexBar.getAllMerchant('1', 'activeUsers',companyid);
        this.$refs.lineChart.getConsumeRankData(companyid);
      }
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .charDateCard {
    background: #fff;
  }

  .tj-title {
    width: 100%;
    padding: 0 20px;

    h2 {
      line-height: 60px;
    }
  }

  .charDateCard {
    .chart-item {
      padding: 10px;
      border-radius: 10px;
      height: auto;
      border: 1px solid #e5e5e5;

      .item-title {
        font-size: 14px;
      }

      .item-info {
        width: 100%;
        height: auto;
        display: flex;

        .info-icon {
          width: 80px;
          height: 80px;
        }

        .money {
          background: url(../../../assets/icons/money.png) no-repeat center;
          background-size: 50px;
        }

        .pay {
          background: url(../../../assets/icons/pay.png) no-repeat center;
          background-size: 60px;
        }

        .tick {
          background: url(../../../assets/icons/tick.png) no-repeat center;
          background-size: 50px;
        }

        .check {
          background: url(../../../assets/icons/check.png) no-repeat center;
          background-size: 50px;

        }

        .customer {
          background: url(../../../assets/icons/customer.png) no-repeat center;
          background-size: 60px;
        }

        .oldCustomer {
          background: url(../../../assets/icons/oldCustomer.png) no-repeat center;
          background-size: 50px;
        }

        .newCustomer {
          background: url(../../../assets/icons/newCustomer.png) no-repeat center;
          background-size: 50px;

        }

        .info-number {
          flex: 1;
          line-height: 80px;
          font-size: 26px;
          text-align: right;
        }
      }
    }

    .chart-item:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }
  }


</style>
